<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/users.css">
</head>
<body>
<div class="all container">
    <div class="qiehuan">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#information" data-toggle="tab">个人信息</a>
            </li>
            <li>
                <a href="#password" data-toggle="tab">密码修改</a>
            </li>
            <li>
                <a href="#schedule" data-toggle="tab">日程安排</a>
            </li>
        </ul>
    </div>

    <div id="myTabContent" class="tab-content">

        <!--基本信息-->
        <div class="tab-pane fade in active clear" id="information">
            <!--头像-->
            <div class="head clear">
                <div class="head-left">
                    <img alt="" class="touxiang">
                </div>
                <div class="head-right">
                    <h2 class="name1"></h2>
                </div>
            </div>
            <h3>个人信息</h3>
            <!--信息内容-->
            <div class="con">
                <ul class="clear">
                    <li>
                        <span class="con-tit">姓名：</span>
                        <span class="con-con name"></span>
                    </li>
                    <li>
                        <span class="con-tit">性别：</span>
                        <span class="con-con sex"></span>
                    </li>
                    <li>
                        <span class="con-tit">年龄：</span>
                        <span class="con-con age"></span>
                    </li>
                    <li>
                        <span class="con-tit">部门：</span>
                        <span class="con-con quanxian"></span>
                    </li>
                    <li>
                        <span class="con-tit">职位：</span>
                        <span class="con-con duty"></span>
                    </li>
                    <li>
                        <span class="con-tit">邮箱：</span>
                        <span class="con-con email"></span>
                    </li>
                    <li>
                        <span class="con-tit">联系电话：</span>
                        <span class="con-con tel"></span>
                    </li>
                    <li>
                        <span class="con-tit">地址：</span>
                        <span class="con-con address"></span>
                    </li>
                </ul>
            </div>

            <div class="btn">
                <button type="button" class="btn-primary" id="xiuGai" data-toggle="modal" data-target="#myModal">
                    点击修改
                </button>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">修改</h4>
                            </div>
                            <div class="modal-body">
                                <div class="newEmail clear">
                                    <span class="newEmailCon">邮箱:</span>
                                    <input type="text" class="gaiEmail">
                                    <span class="emailWrong"></span>
                                </div>
                                <div class="newTel clear">
                                    <span class="newTelCon">联系电话:</span>
                                    <input type="text" class="gaiTel">
                                    <span class="telWrong"></span>
                                </div>
                                <div class="newAddress clear">
                                    <span class="newAddressCon">地址:</span>
                                    <input type="text" class="gaiAddress">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" id="saveNew">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--修改密码-->
        <div class="tab-pane fade" id="password">
            <div class="newPasswords">
                <span>新密码：</span>
                <input type="password" placeholder="新密码" class="gaiPassword">
            </div>
            <div class="newPasswordsAgain">
                <span>确认密码：</span>
                <input type="password" placeholder="确认密码" class="gaiPasswordAgain">
            </div>
            <div class="newPasswordBtn">
                <button type="button" class="newPassword">确认修改</button>
            </div>
            <p>PS.密码长度不小于6，不大于12，且由字符和数字组成</p>
        </div>

        <!--日程安排-->
        <div class="tab-pane fade" id="schedule">
            <div class="mySchedule">

                <div class="addPlan">
                    <p class="addPlanTime">选择时间：<input type="date" id="eventTime"></p>
                    <p class="addPlanTit">事件标题：<input type="text" id="eventTit"></p>
                    <p class="addPlanThing">添加事件：<textarea cols="30" rows="3" id="eventThing"></textarea></p>

                    <button class="addPlanBtn">添加行程</button>
                </div>
                <div class="plan clear">

                </div>

            </div>
        </div>



    </div>
</div>

<script src="../js/jquery-3.1.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../js/data.js"></script>
<script src="../js/users.js"></script>


</body>
</html>